<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	#div4{width:100px;height:100px;border:10px solid #333;display: none;}
	</style>
	<script type="text/javascript">
	window.onload = function (){

		//冒泡机制的影响 ：

		var oBtn1 = document.getElementById('btn1');
		var oDiv4 = document.getElementById('div4');

		oBtn1.onclick = function () {
			oDiv4.style.display = 'block';
		}

		document.onclick = function () {
			setTimeout(function (){
				oDiv4.style.display = 'none';	//为了清楚地看到冒泡影响，加个定时器可以看得更清楚 是怎么一回事（1秒后父级document也接收到点击事件并执行事件函数）
			},1000)
		}
	}
	</script>
</head>
<body>
	<input id="btn1" type="button" value="点击" />
	<div id="div4"></div>
</body>
</html>